<template>
  <div class="timer">
    <div class="time-split" v-for="(item, i) in times" :key="i">
      <div class="times" v-for="subitem in item" :key="subitem.formatKey">
        <div class="time-nums">
          <div class="num-box" v-for="(num, j) in subitem.value" :key="j">
            <transition name="rotate" v-for="n in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]" :key="n">
              <span class="num" v-show="n === num">{{num}}</span>
            </transition>
          </div>
        </div>
        <span class="unit">{{subitem.unit}}</span>
      </div>
    </div>
  </div>
  <div id="luckysheetContent" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0px;"></div>
</template>

<script>
import { defineComponent, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'
// import luckysheet from 'rollup-signature'
let interval = -1

export default defineComponent({
  setup() {
    const times = reactive([
        [
          {
            formatKey: 'YYYY',
            value: [0, 0, 0, 0],
            unit: '年'
          },
          {
            formatKey: 'MM',
            value: [0, 0],
            unit: '月'
          },
          {
            formatKey: 'DD',
            value: [0, 0],
            unit: '日'
          }
        ],
        [
          {
            formatKey: 'HH',
            value: [0, 0],
            unit: '时'
          },
          {
            formatKey: 'mm',
            value: [0, 0],
            unit: '分'
          },
          {
            formatKey: 'ss',
            value: [0, 0],
            unit: '秒'
          }
        ]
      ])
      const options = {
        lang: 'zh'
      }
      onMounted(() => {
          // console.log(luckysheet)
          // let option = {
          //   container: "luckysheetContent",
          //   lang: 'zh'
          // }
          // luckysheet.create(option)
      })
      return {
        times,
        options
      }
  },
  beforeCreate () {
    interval = window.setInterval(() => {
      const datetime = dayjs(new Date())
      this.times.forEach((item, i) => {
        item.forEach(({formatKey}, j) => {
          this.times[i][j].value = datetime.format(formatKey).split('').map(n => Number(n))
        })
      })
    }, 1000)
  },
  beforeUnmount () {
    clearInterval(interval)
  }
})
</script>

<style lang="scss" scoped>
.timer{
  font-size: 12px;
  color: #f00;
  padding-top: 6px;
  margin-right: 20px;
  .time-split{
    float: right;
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    margin-bottom: 6px;
    .times{
      display: flex;
      margin-right: 6px;
      .time-nums{
        display: flex;
        vertical-align: text-bottom;
        background: #13022b;
        padding: 6px;
        border: 1px solid #00d2ff;
        box-shadow: inset 0 0 3px 2px #4c0a7d;
        margin-right: 6px;
        .num-box{
          height: 30px;
          overflow: hidden;
          margin-right: 4px;
          &:last-child{
            margin-right: 0;
          }
          .num{
            font-size: 26px;
            font-weight: bold;
            display: block;
            color: #00d2ff;
            background-color: #220d61;
            &::after{
              // content: '';
              width: 20px;
              height: 2px;
              display: block;
              position: absolute;
              background: #13022b;
              margin-top: -18px;
            }
          }
        }
      }
      .unit{
        font-size: 14px;
        position: relative;
        text-indent: 2px;
        padding-top: 24px;
      }
    }
  }
}

/*翻牌动画*/
  .rotate-enter-active{
  }
  .rotate-leave-active{
    color: rgba(0, 0, 0, 0) !important;
    transition: .5s ease;
  }
  .rotate-enter,.rotate-leave-to{
    transform: rotateX(-180deg);
  }
  /*翻牌动画*/
</style>
